<template>
    <div class="main-container">
      <el-button @click="handleBatchDelete">批量删除</el-button>
      <el-table
          class="table"
          :data="postData"
          border
          :header-cell-style="{ color: 'black', 'background-color': '#f5f7f9','text-align': 'center' }"
          @selection-change="handleSelectionChange"
      >
          <el-table-column type="selection" width="55"></el-table-column>
          <el-table-column
              v-for="item in postDataLabel"
              :key="item.prop"
              :prop="item.prop"
              :label="item.label"
              show-overflow-tooltip
              :width="item.width ? item.width : 80"
          >
          <template #default="{ row }" v-if="item.prop === 'avatar'">
              <div style="display: flex; justify-content: center; align-items: center;">
                <img :src="row.avatar" alt="发布者头像" style="width: 50px; height: 30px; object-fit: cover;">
              </div>
            </template>
          <template #default="{ row }" v-else-if="item.prop === 'imageUrl'">
              <div style="display: flex; justify-content: center; align-items: center;">
                <img :src="row.imageUrl" alt="帖子图" style="width: 80px; height: 30px; object-fit: cover;">
              </div>
            </template>
            <template #default="{ row }" v-else>
              <div style="text-align: center;">
                {{ row[item.prop] }}
              </div>
            </template>
        </el-table-column>
        <el-table-column label="操作">
            <template #default="{ row }">
              <div class="action-column">
                <el-button @click="handleDelete(row)">删除</el-button>
                <el-button @click="handleExamine(row)">审核通过</el-button> 
              </div>
            </template>
          </el-table-column>
      </el-table>

          
      <div class="pagination-container">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          v-model:current-page="pagination.pageNo"
          :page-size="pagination.pageSize"
          layout="total,prev, pager, next"
          :total="pagination.total"
        >
        </el-pagination>
      </div>
    </div>



</template>

<script setup>
  import { ref,onMounted } from 'vue';
  import { getPostListAPI,updatePostStatusAPI } from '../../../../api/admin/check'
  import { delPostAPI,delPostSAPI } from '../../../../api/admin.js'
  import { ElMessage } from 'element-plus';
  import dayjs from 'dayjs';
const selectedRows = ref([]);
const postDataLabel = ref([
  {
    prop: 'id',
    label: '帖子id',
    width: 100,
    sortable: true
  },
  {
    prop: 'title',
    label: '帖子标题',
  },
  {
    prop: 'content',
    label: '帖子文案',
  },
  {
    prop: 'imageUrl',
    label: '图片',
    width: 150,
  },
  {
    prop: 'name',
    label: '作者名',
    width: 100,
  },
  {
    prop: 'authorId',
    label: '作者id',
  },
  {
    prop: 'avatar',
    label: '头像',
  },
  {
    prop: 'createTime',
    label: '创建时间',
    width: 150,
    sortable: true,
  },
]);
const postData = ref([]);
const pagination = ref({
  pageNo: 1,
  pageSize: 10,
  total: 0,
});
const handleDelete = async(row) => {
  try{
    const response = await delPostAPI({postId:row.id});
      // console.log(response.data);
      if (response.data.code === 0) {
            ElMessage.success('帖子删除成功');
            await fetchPostList(); 
        } else {
           ElMessage.error('帖子删除失败');
        }
  }catch(error){
    ElMessage.error('网络请求出错，请稍后重试: ' + (error.message || '未知错误'));
  }
  
};
const handleSelectionChange = (rows) => {
    selectedRows.value = rows;
  };
const handleBatchDelete = async () => {
    if (selectedRows.value.length === 0) {
      console.log('请选择要删除的帖子');
      return;
    }
    const ids = selectedRows.value.map(row => row.id.toString()).join(',');
    try {
      // console.log(ids)
      const response = await delPostSAPI({ids});
      // console.log(response.data)
      if (response.data.code === 0) {
        // 从表格数据中移除已删除的行
        // postData.value = postData.value.filter(item =>!ids.includes(item.postId));
        await fetchPostList();
        console.log('批量删除成功');
      } else {
        console.error('批量删除失败:', response.data.message);
      }
    } catch (error) {
      console.error('批量删除失败:', error);
    }
};
const handleSizeChange = async (newSize) => {
  pagination.value.pageSize = newSize;
  pagination.value.pageNo = 1;
  // let param = {
  //     pageNo: pagination.value.pageNo,
  //     pageSize: pagination.value.pageSize
  //   };
  await fetchPostList();
};
const handleCurrentChange = async (newPage) => {
  pagination.value.pageNo = newPage;    
  let param = {
      pageNo: newPage,
      pageSize: pagination.value.pageSize
    };
  await fetchPostList(param);
};
const fetchPostList = async () => {
  try {
    let param = {
      pageNo: pagination.value.pageNo,
      pageSize: pagination.value.pageSize
    };
    const response = await getPostListAPI(param);
    // console.log(response.data);
    const formattedData = response.data.data.list.map(item => {
        return {
          ...item,
          createTime: dayjs(item.createTime).format('YYYY-MM-DD HH:mm'),
        };
      });
      postData.value = formattedData;
      // pagination.value.total=response.data.data.total
    //postData.value = response.data.data.list;
    pagination.value.total = response.data.data.total;
    // console.log("啊啊啊",pagination)
   } catch (error) {
    console.error('获取帖子列表失败:', error);
  }
};
const handleExamine = async (row) => {
  try {
        // 调用更新状态接口，将 status 设为 0 表示审核通过
        let params={
            postId:row.id,
            status:0
        }
       const response = await updatePostStatusAPI(params)
       // console.log(response.data);
        if (response.data.code === 0) {
            // 从表格数据中移除该帖子记录
            postData.value = postData.value.filter(item => item.id!== row.id);
            // 更新总数据量
            pagination.value.total--;
            ElMessage.success('审核通过，该帖子已从列表移除');
        } else {
            ElMessage.error('审核失败: ' + response.data.message);
        }
    } 
    catch (error) {
        ElMessage.error('操作发生错误: ' + error.message);
    }
};
onMounted(async () => {
    await fetchPostList();
});
</script>

<style lang="less" scoped>
.main-container{
  height: calc(100% - 64px);
  // height: 100%;
  // background-color: aqua;
}
.el-table {
    // overflow-y: scroll;
    height: 100%;
    // background-color: red;
    .action-column {
      display: flex;
      flex-wrap: nowrap;
      /* 确保按钮不换行 */
      white-space: nowrap;
      /* 防止按钮内的文本换行 */
    }
}
.pagination-container {
  display: flex;
  // background-color: rgb(55, 224, 21);
  justify-content: center;
  // margin-top: 20px;
}
</style>